<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D 肛门镜展示</title>
    <style>
        body { 
            margin: 0; 
            overflow: hidden; 
            background-color: #f0f0f0;
        }
        canvas { 
            display: block; 
        }
        #info {
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            color: white;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div id="info">拖动鼠标可以旋转模型，滚轮可以缩放</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.min.js"></script>
    <script>
        // 初始化场景、相机和渲染器
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 添加光源
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);
        
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(1, 1, 1);
        scene.add(directionalLight);

        // 添加控制器
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;

        // 设置相机位置
        camera.position.z = 5;

        // 创建一个简单的肛门镜模型（如果需要更精确的模型，可以加载GLTF文件）
        function createAnoscope() {
            // 创建一个圆锥体作为肛门镜主体
            const coneGeometry = new THREE.ConeGeometry(0.5, 4, 32);
            const coneMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
            const cone = new THREE.Mesh(coneGeometry, coneMaterial);
            
            // 创建一个圆柱体作为手柄
            const handleGeometry = new THREE.CylinderGeometry(0.1, 0.1, 2, 32);
            const handleMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
            const handle = new THREE.Mesh(handleGeometry, handleMaterial);
            handle.position.y = -2;
            
            // 创建一个圆柱体作为顶部
            const topGeometry = new THREE.CylinderGeometry(0.5, 0.5, 0.2, 32);
            const topMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
            const top = new THREE.Mesh(topGeometry, topMaterial);
            top.position.y = 2;
            
            // 创建一个球体作为顶部装饰
            const sphereGeometry = new THREE.SphereGeometry(0.1, 32, 32);
            const sphereMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
            const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
            sphere.position.y = 2.2;
            
            // 将所有部分组合在一起
            const anoscope = new THREE.Group();
            anoscope.add(cone);
            anoscope.add(handle);
            anoscope.add(top);
            anoscope.add(sphere);
            
            return anoscope;
        }

        // 添加肛门镜模型到场景
        const anoscope = createAnoscope();
        scene.add(anoscope);

        // 窗口大小调整
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>